小程序商品 微信小程序商品介绍
page{
background-color: #ffffff;
font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
font-size: 30rpx;
color:#888;
}
.navigator-hover{
background: none;
}
.goods-box{
position: relative;
text-align: center;
color: #454552;
border-bottom: 30rpx solid #ededed;
}
.goods-box .goods-thumb{
width: 100%;
height: 390rpx;
}
.goods-box .goods-operation{
position: relative;
width: 92%;
height: 100rpx;
line-height: 100rpx;
padding: 0 50rpx;
margin:0 auto 60rpx;
box-sizing: border-box;
border-radius: 10rpx;
background: #39F50B;
color: #fff;
font-size: 28rpx;
}
.goods-operation text{
display: inline-block;
height: 100rpx;
}
.goods-operation-num{
width: 160rpx;
}
.goods-operation-add{
width: 80rpx;
margin-right: 30rpx;
}
.goods-to-cart{
width: 210rpx;
padding-right: 75rpx;
}
.goods-cart-img{
position: absolute;
right: 50rpx;
top: 28rpx;
width: 45rpx;
height: 45rpx;
}
.goods-left{
float:left;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.goods-right{
float:right;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.gooddetail{
width:92%;
margin:0 auto
}
.goods-title{
width:92%;
border-bottom:1px solid #eee;
line-height:80rpx;
font-size: 36rpx;
margin:0 auto 30rpx;
}
.goods-price-left{
font-size: 32rpx;
float:left;
}
.goods-price-right{
font-size: 40rpx;
float:right;
color:red;
font-weight:bold;
}
.goods-tab-nav{
display: inline-block;
width: 33.33%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ededed;
box-sizing: border-box;
text-align: center;
color: #c7c7cb;
}
.goods-tab-nav.on{
color: #bcaa8a;
border-bottom: 5rpx solid #bcaa8a;
}
.goods-content{
padding: 40rpx;
}
.goods_details{
display: inline-block;
width: 100%;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #ededed;
box-sizing: border-box;
text-align: center;
color: #c7c7cb;
}
.ubom{clear:both;width:92%;height:20rpx;border-bottom:1px solid #eee;margin:20rpx auto;}
<view class="main">
<view class="goods-box">
<image src="/image/uuu1.jpg" class="goods-thumb" mode="aspectFill"></image>
<view class="goods-title">微信小程序</view>
<view class="gooddetail">
<view class="goods-left">库存：89</view>
</view>
<view style="clear:both;"></view>
<view class="gooddetail" style="margin-bottom:15rpx;">
<view class="goods-price-left">原价：￥1000</view>
<view class="goods-price-right">现价：￥99</view>
</view>
<view class="ubom"></view>
<view class="goods-operation" bindtap="teltoUs">
<text >拨打电话</text>
</view>
</view>
<view class="goods-tab-box">
<view class="goods_details" data-index="0">商品详情</view>
<view class="goods-content">
<view>微信小程序商品介绍、微信小程序商品介绍、微信小程序商品介绍、微信小程序商品介绍、微信小程序商品介绍、</view>
</view>
</view>
</view>
